<template>
    <!-- 列表区域 -->
    <section>
        <ul>
            <li v-for="(item,index) in list" 
                :key="item.id"
                @mouseover="handleMouseOver(index)" 
                @mouseleave="handleMouseLeave(index)">
                <span>{{ index + 1 }}.</span><label>{{ item.name }}</label>
                <button 
                v-show="isHovered === index" 
                @click="del(item.id)">x</button>
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    props:{
        list:Array
    },
    data(){
        return{
            isHovered: null
        }
    },
    methods:{
        del(id){
            // console.log(id)
            this.$emit('del',id)
        },
        handleMouseOver(key) {
        // 鼠标移入时将 isHovered 设置为 true，使元素显示
            this.isHovered = key;
        },
        handleMouseLeave(key) {
        // 鼠标移出时将 isHovered 设置为 false，使元素隐藏
            this.isHovered = !key;
        }
    }
}
</script>

<style scoped>
    section{
        background-color: #ffd;
        text-align: left;
        position: relative;
        margin-top: -20px;
    }
    ul{
        list-style: none;;
    }
    li{
        height: 50px;
    }
    button{
        width: 50px;
        border: none;
        background-color: #ffd;
        position: absolute;
        right:20px;
        
    }
</style>